<template>
  <view class="history-item-container">
    <view class="cover">
      <view class="cover-img">
        <image class="cover-bg" :src="bg_h" />
        <u-image
          class="img-c"
          width="100%"
          height="77rpx"
          :src="details.goods_image_text"
          :lazy-load="true"
        ></u-image>
      </view>
      <view
        class="tag render-tag"
        :class="typeList[reward[details.reward_name] || 'C'].style"
      >
        <view class="font">
          <text>{{ details.reward_name }}</text
          >赏</view
        >
      </view>
      <view class="num-no">{{ details.sort }} </view>
    </view>
    <view class="info">
      <view class="title nowrap_ellipsis"> {{ details.goods_name }}</view>
      <view
        class="username render-tag nowrap_ellipsis"
        :class="typeList[reward[details.reward_name] || 'C'].style"
        ><view class="font"> {{ details.user.nickname || '匿名' }} </view>
      </view>
      <view class="time">中奖时间：{{ details.createtime }}</view>
    </view>
  </view>
</template>

<script>
import bg_h from '../img/bg-history.png';
import { HISTORY_ITEM, REWARD } from '../portrait/portait_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      bg_h,
      reward: REWARD,
      typeList: HISTORY_ITEM,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.history-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  margin-bottom: 17rpx;
  padding-top: 3rpx;
  padding-left: 4rpx;
  width: 100%;
  height: 77rpx;

  view,
  image {
    max-width: none;
  }

  .cover {
    flex-shrink: 0;
    position: relative;
    margin-right: 16rpx;
    width: 78rpx;
    height: 77rpx;
    .cover-img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 7rpx;
      .img-c {
        position: relative;
        z-index: 1;
      }
      .cover-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .num-no {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;
      padding: 0 3rpx;
      text-align: center;
      line-height: 20rpx;
      min-width: 22.5rpx;
      max-width: 75rpx;
      height: 20rpx;
      color: #fff;
      font-size: 15rpx;
      font-weight: bold;
      border-radius: 7rpx 0 7rpx 0;
      background-image: linear-gradient(
        45deg,
        rgba(12, 226, 213, 1),
        rgba(116, 92, 232, 1)
      );
    }
    .tag {
      position: absolute;
      top: -2rpx;
      left: -3.5rpx;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 8rpx;
      width: 35rpx;
      height: 16rpx;
      border-radius: 10rpx 1rpx 10rpx 1rpx;
      font-weight: 600;
    }
  }

  .info {
    width: calc(100% - 75rpx - 6rpx);
    overflow: hidden;
    flex-grow: 1;
    .title {
      width: 100%;
      font-size: 14rpx;
      color: #000;
      font-weight: 600;
    }

    .username {
      display: inline-block;
      margin: 14rpx 0 4rpx 0rpx;
      padding: 1rpx 7.5rpx;
      min-width: 50rpx;
      max-width: 125rpx;
      height: 16rpx;
      font-weight: bold;
      // color: #0f0f0f;
      border-radius: 10rpx 1rpx 10rpx 1rpx;
      .font {
        height: 100%;
        line-height: 16rpx;
        text-align: center;
        font-size: 11rpx;
      }
    }
    .time {
      font-size: 11rpx;
      font-weight: bold;
      color: #858585;
    }
  }
}

.render-tag {
  text {
    margin-right: 1rpx;
    font-size: 13rpx;
  }

  &.z {
    background-image: linear-gradient(
      90deg,
      rgba(125, 52, 235, 1),
      rgba(224, 33, 127, 1)
    );
    .font {
      background-image: linear-gradient(
        45deg,
        rgba(246, 225, 30, 1),
        rgba(102, 237, 112, 1),
        rgba(43, 205, 215, 1)
      );
      background-clip: text;
      color: transparent;
      font-size: 9rpx;
      font-weight: 600;
      span {
        font-size: 14rpx;
      }
    }
  }
  &.j {
    background-image: linear-gradient(
      90deg,
      rgba(250, 177, 26, 1),
      rgba(215, 49, 100, 1)
    );
    color: #fff;
    font-size: 8rpx;
  }
  &.s {
    background-image: linear-gradient(
      45deg,
      rgba(246, 225, 30, 1),
      rgba(102, 237, 112, 1),
      rgba(43, 205, 215, 1)
    );
    color: #000;
  }
  &.a {
    background-image: linear-gradient(
      45deg,
      rgba(169, 82, 217, 1),
      rgba(116, 92, 232, 1)
    );
    color: #fff;
  }
  &.b {
    background-image: linear-gradient(
      45deg,
      rgba(252, 115, 225, 1),
      rgba(226, 143, 116, 1)
    );
    color: #fff;
  }
  &.c {
    background: rgba(46, 211, 205, 1);
    color: #fff;
  }
  &.d {
    background: rgba(0, 0, 0, 1);
    color: #fff;
  }
  &.e {
    background: rgba(0, 0, 0, 1);
    color: #fff;
  }
  &.f {
    background: rgba(0, 0, 0, 1);
    color: #fff;
  }
  &.g {
    background: rgba(0, 0, 0, 1);
    color: #fff;
  }
}
</style>
